<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>购物车</title>
    <link rel="stylesheet" href="../CSS/public-css.css">
    <link rel="stylesheet" href="../CSS/gwc-css.css">
</head>
<script src="../js/jquery-3.4.1.min.js"></script>

<body>
<div class="main-div">
    <div class="header-div">
        <div class="logo-div">
            <img src="../img/goktech-img/images/logo.png" alt="无法加载图片">
        </div>
        <div class="form-div">
            <form action="">
                <input type="search" placeholder="热门搜索：干花花瓶">
                <input type="button">
            </form>
        </div>
    </div>
    <div class="body-div">
        <div class="nav-div">
            <ul>
                <li><a href="../homePage.jsp">商品首页</a></li>
                <li><a href="#">所有商品</a>
                    <div class="dropdown-content-one">
                        <div class="wrapper">
                            <a href="#">
                                <div class="img-div-one">
                                    <img src="../img/WebProgram/img/nav1.jpg" alt="无法加载图片">
                                </div>
                                <div class="dropdown-text-div">
                                    <span>浓情欧式</span>
                                </div>
                            </a>
                            <a href="#">
                                <div class="img-div-one">
                                    <img src="../img/WebProgram/img/nav2.jpg" alt="无法加载图片">
                                </div>
                                <div class="dropdown-text-div">
                                    <span>浪漫美式</span>
                                </div>
                            </a>
                            <a href="#">
                                <div class="img-div-one">
                                    <img src="../img/WebProgram/img/nav3.jpg" alt="无法加载图片">
                                </div>
                                <div class="dropdown-text-div">
                                    <span>雅致中式</span>
                                </div>
                            </a>
                            <a href="#">
                                <div class="img-div-one">
                                    <img src="../img/WebProgram/img/nav6.jpg" alt="无法加载图片">
                                </div>
                                <div class="dropdown-text-div">
                                    <span>简约现代</span>
                                </div>
                            </a>
                            <a href="#">
                                <div class="img-div-one">
                                    <img src="../img/WebProgram/img/nav5.jpg" alt="无法加载图片">
                                </div>
                                <div class="dropdown-text-div">
                                    <span class="text-span">创意装饰</span>
                                </div>
                            </a>
                        </div>
                    </div>
                </li>
                <li><a href="#">装饰摆件</a></li>
                <li><a href="#">布艺软饰</a></li>
                <li><a href="#">墙饰壁挂</a></li>
                <li><a href="#">蜡艺香薰</a></li>
                <li><a href="#">创意家居</a></li>
            </ul>
        </div>
        <div class="location-div">
            <div class="parcel-div">
                <a href="../homePage.jsp">首页</a>
                <span>&nbsp;&nbsp;/&nbsp;&nbsp;</span>
                <a href="./grzx.jsp">个人中心</a>
                <span>&nbsp;&nbsp;/&nbsp;&nbsp;</span>
                <a class="goods-link" href="#">购物车</a>
            </div>
        </div>
    </div>
    <div class="shopping-list">
        <div class="parcel-div">
            <div class="goods-column">
                <span>商品</span>
                <span>单价</span>
                <span>数量</span>
                <span>小计</span>
                <span>操作</span>
            </div>
            <ul></ul>
            <div class="settlement">
                <div class="settlement-detail">
                    <div class="left-part">
                        <input type="checkbox" id="allChoose">
                        <span>全选</span>
                    </div>
                    <div class="right-part">
                        <div class="total-amount">
                            <span>共</span>
                            <span>0</span>
                            <span>件商品</span>
                        </div>
                        <div class="total-price">
                            <span>合计:</span>
                            <span>￥0.00</span>
                        </div>
                    </div>
                </div>
                <div class="settlement-btn">
                    <button>结算</button>
                </div>
            </div>
            <div class="settlement-tip">
                <span>请选择商品</span>
            </div>
        </div>
    </div>
    <div class="main-footer-div">
        <div class="top-div">
            <div class="parcel-div">
                <div class="clearfix">
                    <img src="../img/temp1/foot1.png" alt="无法加载图片">
                    <span>7天无理由退货</span>
                </div>
                <div class="clearfix">
                    <img src="../img/temp1/foot2.png" alt="无法加载图片">
                    <span>15天免费换货</span>
                </div>
                <div class="clearfix">
                    <img src="../img/temp1/foot3.png" alt="无法加载图片">
                    <span>满599包邮</span>
                </div>
                <div class="clearfix">
                    <img src="../img/temp1/foot4.png" alt="无法加载图片">
                    <span>手机特色服务</span>
                </div>
            </div>
        </div>
        <div class="botton-div">
            <p>最家家居&copy;2013-2017公司版权所有 京ICP备080100-44备0000111000号<br>
                违法和不良信息举报电话:400-800-8200,本网站所列数据,除特殊说明,所有数据均出自我司实验室测试
            </p>
        </div>
    </div>
    <div class="broadside-nav">
        <div>
            <a href="${pageContext.request.contextPath}/shoppingList.do">
                <img src="../img/goktech-img/images/gwc.png" alt="">
                <span>去购<br>物车</span>
            </a>
        </div>
        <div class="service-div">
            <a href="#">
                <img src="../img/goktech-img/images/gt2.png" alt="">
                <span>联系<br>客服</span>
            </a>
        </div>
        <div>
            <a href="grzx.jsp">
                <img src="../img/goktech-img/images/grzx.png" alt="">
                <span>个人<br>中心</span>
            </a>
        </div>
        <div class="hidden-div">
            <a href="#top">
                <img src="../img/goktech-img/images/gt4.png" alt="">
                <span>返回<br>顶部</span>
            </a>
        </div>
        <p class="hidden-p">400-800-8200</p>
    </div>
</div>
</body>
<script src="../js/homePage-js.js"></script>
<script src="../js/gwc-js.js"></script>
<script>
    //实现购物车点击部分商品后在结算清单中显示
    function part_update(object) {
        let part_goods_totalAmount = 0;
        let part_goods_totalPrice = 0;
        let inputList = $(object).children("li").children(".goods").children(".check").children("input");

        for (let i = 0; i < inputList.length; i++) {
            if ($(inputList[i]).hasClass("activeCheck")) {
                part_goods_totalAmount += Number($(inputList[i]).parent().parent().siblings(".amount").children("span").html());
                part_goods_totalPrice += Number($(inputList[i]).parent(".check").parent(".goods").siblings(".subtotal").children("span").html().replace("￥", ""));
            }
        }
        $(".settlement .total-amount span:nth-child(2)").html(part_goods_totalAmount);
        $(".settlement .total-price span:last-child").html("￥" + Number(part_goods_totalPrice).toFixed(2));
    }

    //购物车增加减少商品按钮效果
    function operation(flag, cmsId, e) {
        $.ajax({
            url: "${pageContext.request.contextPath}/shoppingNum.do",
            type: "post",
            data: {"flag": flag, "cmsId": cmsId},
            dataType: "json",
            success: function (message) {
                if (message.flag === "1") {
                    judge(flag, e);
                }
            },
            error: function () {
                console.log("加减错误");
            }
        });

        //此方法为判断参数 flag的值,根据值进行增加商品,减少商品数量和删除商品记录
        function judge(flag, e) {
            if (flag === 1) {
                let selectAmount = $(e).siblings("span").html();
                selectAmount++;
                $(e).siblings("span").html(selectAmount);

                let price = $(e).parent(".amount").siblings(".price").children().html().replace("￥", "");
                let goodsAmount = $(e).siblings("span").html();
                $(e).parent(".amount").siblings(".subtotal").children().html("￥" + Number(goodsAmount * price).toFixed(2));
                part_update($(e).parent().parent().parent());
            } else if (flag === 0) {
                let selectAmount = $(e).siblings("span").html();
                if (selectAmount > 1) {
                    selectAmount--;
                    $(e).siblings("span").html(selectAmount);

                    let price = $(e).parent(".amount").siblings(".price").children().html().replace("￥", "");
                    let goodsAmount = $(e).siblings("span").html();
                    $(e).parent(".amount").siblings(".subtotal").children().html("￥" + Number(goodsAmount * price).toFixed(2));

                    let goods_name = $(e).parent(".amount").siblings(".goods").children(".detail").children(".goods-name").html();
                    part_update($(e).parent().parent().parent());
                }
            } else {
                $(e).parent(".operation").parent("li").addClass("active");
                let li = $(".shopping-list ul li");
                for (let i = 0; i < li.length; i++) {
                    if (li[i].className === "active") {
                        li.eq(i).remove();
                    }
                }

                $(".shopping-list li:even").css("backgroundColor", "#DBDBDB");
            }
        }
    }

    //实现点击结算按钮后生成订单
    $(".settlement-btn button").on("click", function () {
        let test = "hello";
        $.ajax({
            url: "${pageContext.request.contextPath}/shoppingList.do",
            type: "post",
            data: {"test": test},
            dataType: "json",
            success: function (message) {

            },
            error: function () {
                console.log("错误")
            }
        })
    });
</script>

<%--遍历购物车商品块--%>
<script>
    $(function () {
        $.ajax({
            url: "${pageContext.request.contextPath}/shoppingList.do?uId=${user.uId}",
            type: "POST",
            dataType: "json",
            success: function (message) {
                let liEle = ``;
                for (let i = 0; i < message.list.length; i++) {
                    liEle = liEle + `
                    <li>
                        <div class="goods">
                            <div class="check">
                                <input type="checkbox" class="checkItem">
                            </div>
                            <img src="../` + message.list[i].cmImg + `" alt="">
                            <div class="detail">
                                <span class="goods-name">` + message.list[i].cmName + `</span>
                                <span class="goods-color">颜色分类: <span>` + message.list[i].color + `</span></span>
                            </div>
                        </div>
                        <div class="price">
                            <span>￥` + message.list[i].cmPrice + `.00</span>
                        </div>
                        <div class="amount">
                            <img class="reduce" onclick="operation(0,` + message.list[i].cmsId + `,this)" src="../img/goktech-img/images/sub.jpg" alt="">
                            <span>` + message.list[i].cmsNumber + `</span>
                            <img class="increase" onclick="operation(1,` + message.list[i].cmsId + `,this)" src="../img/goktech-img/images/add.jpg" alt="">
                        </div>
                        <div class="subtotal">
                            <span>￥` + message.list[i].cmsSubtotal + `.00</span>
                        </div>
                        <div class="operation">
                            <span onclick="operation(2,` + message.list[i].cmsId + `,this)" cmsId=` + message.list[i].cmsId + `>删除</span>
                        </div>
                    </li>`;
                }
                $(".shopping-list ul").html(liEle);
            }
        });
    })
</script>

</html>
